<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		* {
			padding: 0;
			margin: 0;
		}
		
		#root button {
			padding: 5px;
			margin: 5px;
		}
		
		#root button.active {
			background: red;
		}
		
		#root div {
			width: 500px;
			height: 300px;
			border: 1px solid green;
		}
	</style>
</head>
<body>
<div id="root">
	<button>中国</button>
	<button>日本</button>
	<button>韩国</button>
	<div>中国新闻</div>
	<div>日本新闻</div>
	<div>韩国新闻</div>
</div>
</body>
<script>
	// 1
	// const btns = document.querySelectorAll("button");
	// const divs = document.querySelectorAll("#root div");
	// let index = 0;// 选中下标
	// for (let i = 0; i < btns.length; i++) {
	// 	divs[i].style.display = "none";
	// 	btns[i].onclick = function () {
	// 		if(i===index) return;
	// 		btns[index].className = null;
	// 		divs[index].style.display = "none";
	// 		index = i;
	// 		btns[index].className = "active";
	// 		divs[index].style.display="block";
	// 	}
	// }
	// btns[index].className = "active";
	// divs[index].style.display = "block";
	
	// 2
	const btns = document.querySelectorAll("button");
	const divs = document.querySelectorAll("#root div");
	let index = 0;// 选中下标
	init();
	function init(){
		for (let i = 0; i < btns.length; i++) {
			hide(i);
			btns[i].onclick = function () {
				if(i===index) return;
				hide();
				index = i;
				show();
			}
		}
		show();
	}
	
	function hide(i=index){
		btns[i].className = null;
		divs[i].style.display = "none";
	}
	function show(){
		btns[index].className = "active";
		divs[index].style.display = "block";
	}
</script>
</html>